通过前面的学习，我们已经知道了前端构建工具的意义，也明确了 Vite 相比于传统构建工具 Webpack 的优势。相信对于为什么要学习和使用 Vite 这个问题，你已经有了自己的答案。

回到实际的应用场景当中，我们应该如何使用 Vite 来搭建前端工程项目呢？这一节，我将和你一起近距离接触 Vite，学完本节你不仅能学会前端开发环境的搭建，更重要的是，你能上手使用 Vite 来初始化一个脚手架项目，并理解这个项目究竟是如何运行起来的。

# 环境搭建

首先需要的是代码编辑器和浏览器，我推荐安装VSCode和Chrome浏览器。

其次是安装 Node.js，如果你的系统中还没有安装 Node.js ，可以进入 Nodejs 官网下载相应的安装包进行手动安装；如果已经安装了 Node.js，你可以使用这个命令检查一下 Node.js 版本:

node -v

推荐 12.0.0 及以上版本，如果低于这个版本，推荐使用 nvm 工具切换 Nodejs 版本。

安装完 Nodejs 之后，包管理器npm也会被自动安装，你可以执行下面的命令来验证:

npm -v

当然，在现代的前端项目中，我非常不推荐使用 npm 作为项目的包管理器，甚至也不再推荐yarn(npm 的替代方案)，因为两者都存在比较严重的性能和安全问题，而这些问题在 pnpm 中得到了很好的解决

因此，包管理器方面我推荐使用 pnpm，安装方式非常简单，输入如下命令即可:

npm i -g pnpm

由于默认的镜像源在国外，包下载速度和稳定性都不太好，因此我建议你换成国内的镜像源，这样pnpm install命令的体验会好很多，命令如下:

pnpm config set registry https://registry.npmmirror.com/

# 项目初始化

在搭建了基本的开发环境之后，我们进入到项目初始化阶段。你可以在终端命令行中输入如下的命令:

pnpm create vite